import VueRouter from "vue-router";
import Vue from "vue";

Vue.use(VueRouter)

const router = new VueRouter({
    mode:'history',
    routes:[
        {
            path:'/',
            redirect:'/home'
        },
        {
            path:'/Home',
            component:()=>import('@/pages/Home'),
            redirect:'/home/movie',
            children:[
                {
                    path:'movie',
                    name:'Movie',
                    component:()=>import('@/pages/Home/Movie')
                },
                {
                    path:'music',
                    component:()=>import('@/pages/Home/Music'),
                    children:[
                        {
                            path:'musicDetail',
                            name:'MusicDetail',
                            component:()=>import('@/pages/Home/Music/MusicDetail'),
                            props:(route)=>({...route.query}),
                            meta:{
                                title:'电影主题'
                            }
                        }
                    ]
                }
            ]
        },
        {
            path:'/Login',
            name:'Login',
            component:()=>import('@/pages/Login'),
            beforeEnter(to,from,next){
                console.log(to,from,next,'路由独享守卫')
                next()
            }
        }
    ]
})
router.beforeEach((to,from,next)=>{
    console.log(to,from,next,'全局前置守卫')
    next()
})
router.beforeResolve((to,from,next)=>{
    console.log(to,from,next,'全局解析守卫')
    next()
})
router.afterEach((to,from)=>{
    console.log(to,from,'全局后置钩子')
})
//路由导航守卫
//1.全局导航守卫
//全局前置守卫--beforeEach
//全局解析守卫--beforeResolve
//全局后置钩子--afterEach
//2.路由独享守卫--beforeEnter
//3.组件内守卫
//进入组件前--beforeRouteEnter
//组件更新时--beforeRouteUpdate
//组件离开时--beforeRouteLeave

export default router